<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            background-color: #f8f9fa;
        }
        .navbar {
            background-color: #343a40;
            color: white;
        }
        .navbar a {
            color: white;
            text-decoration: none;
        }
        .sidebar {
            height: 100vh;
            background-color: #343a40;
            color: white;
            padding: 20px;
        }
        .sidebar a {
            color: white;
            text-decoration: none;
            padding: 10px 0;
            display: block;
        }
        .sidebar a:hover {
            background-color: #5a6268;
        }
        .content {
            padding: 20px;
        }
        .custom-width {
            width: 150px !important;
        }
        .table-responsive {
            margin-top: 20px;
        }
        .pagination {
            text-align: center;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
    <a class="navbar-brand" href="#">宿舍管理系统</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#" id="userProfileLink">当前用户: <span id="username"></span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/login" id="logout">退出系统</a>
            </li>
        </ul>
    </div>
</nav>
<div class="d-flex">
    <div class="sidebar">
        <a href="#" id="studentListLink">学生列表</a>
<!--        <a href="#" id="dormitoryListLink">宿舍列表</a>-->
    </div>
    <div class="content flex-grow-1">
        <div class="search-bar mb-3 d-flex">
            <input type="text" class="form-control mr-2 custom-width" id="searchName" placeholder="姓名">
            <input type="text" class="form-control mr-2 custom-width" id="searchOrigin" placeholder="籍贯">
            <button class="btn btn-primary" id="searchButton">搜索</button>
        </div>
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>学院</th>
                    <th>专业</th>
                    <th>宿舍号</th>
                    <th>班级</th>
                    <th>床位号</th>
                    <th>电话</th>
                    <th>邮箱</th>
                    <th>紧急联系人</th>
                    <th>籍贯</th>
                </tr>
                </thead>
                <tbody id="studentTableBody">

                </tbody>
            </table>
        </div>
        <div class="pagination">
            <button class="btn btn-primary" id="prevPage">上一页</button>
            <span id="pageInfo"></span>
            <button class="btn btn-primary" id="nextPage">下一页</button>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        var user = JSON.parse(localStorage.getItem('userInfo'));
        if (user) {
            $('#username').text(user.name);
        } else {
            alert('请先登录')
            window.location.href = '/login';
        }

        // 初始化分页参数
        var currentPage = 1;
        var pageSize = 5;
        var totalPages = 1;

        // 加载学生列表
        loadStudentList(currentPage, pageSize);

        // 学生列表链接点击事件
        $('#studentListLink').on('click', function (event) {
            event.preventDefault();
            $('#pageTitle').text('学生列表');
            loadStudentList(1, pageSize);
        });

        // 宿舍列表链接点击事件
        $('#dormitoryListLink').on('click', function (event) {
            event.preventDefault();
            $('#pageTitle').text('宿舍列表');

            $('#studentTableBody').empty();
            $('#studentTableBody').append('<tr><td colspan="14">未开放</td></tr>');
        });

        // 上一页按钮点击事件
        $('#prevPage').on('click', function (event) {
            event.preventDefault();
            if (currentPage > 1) {
                currentPage--;
                loadStudentList(currentPage, pageSize);
            }
        });

        // 下一页按钮点击事件
        $('#nextPage').on('click', function (event) {
            event.preventDefault();
            if (currentPage < totalPages) {
                currentPage++;
                loadStudentList(currentPage, pageSize);
            }
        });

        // 加载学生列表函数
        function loadStudentList(pageNum, pageSize) {
            $.ajax({
                url: '/student/list',
                type: 'GET',
                data: {
                    pageNum: pageNum,
                    pageSize: pageSize
                },
                success: function (response) {
                    if (response.code === 200) {
                        var students = response.data.list;
                        var tableBody = $('#studentTableBody');
                        tableBody.empty();
                        students.forEach(function (student) {
                            var row = '<tr>' +
                                '<td>' + student.name + '</td>' +
                                '<td>' + (student.gender === '0' ? '男' : '女') + '</td>' +
                                '<td>' + student.college + '</td>' +
                                '<td>' + student.major + '</td>' +
                                '<td>' + student.dormId + '</td>' +
                                '<td>' + student.className + '</td>' +
                                '<td>' + student.bedNumber + '</td>' +
                                '<td>' + student.phone + '</td>' +
                                '<td>' + student.email + '</td>'+
                                '<td>' + student.emergencyContact + '</td>' +
                                // '<td>' + student.username + '</td>' +
                                '<td>' + student.origin + '</td>' +
                                '</tr>';
                            tableBody.append(row);
                        });

                        // 更新分页信息
                        currentPage = response.data.pageNum;
                        totalPages = response.data.pages;
                        $('#pageInfo').text('第 ' + currentPage + ' 页 / 共 ' + totalPages + ' 页');
                    } else {
                        alert('加载学生列表失败: ' + response.message);
                    }
                },
                error: function (xhr, status, error) {
                    alert('加载学生列表失败');
                }
            });
        }
        // 搜索按钮点击事件
        $('#searchButton').on('click', function (event) {
            event.preventDefault();
            var name = $('#searchName').val();
            var origin = $('#searchOrigin').val();
            searchStudents(name, origin);
        });

        function searchStudents(name,origin){
            $.ajax({
                url: '/student/findStu',
                type:'GET',
                data:{
                    name:name,
                    origin:origin
                },
                success:function (res){
                    if(res.code === 200){
                        var students = res.data;
                        var tableBody = $('#studentTableBody');
                        tableBody.empty();
                        students.forEach(function (student){
                            var row =
                                '<tr>' +
                                    '<td>' + student.name + '</td>' +
                                    '<td>' + (student.gender === '0' ? '男' : '女') + '</td>' +
                                    '<td>' + student.college + '</td>' +
                                    '<td>' + student.major + '</td>' +
                                    '<td>' + student.dormId + '</td>' +
                                    '<td>' + student.className + '</td>' +
                                    '<td>' + student.bedNumber + '</td>' +
                                    '<td>' + student.phone + '</td>' +
                                    '<td>' + student.email + '</td>'+
                                    '<td>' + student.emergencyContact + '</td>' +
                                    // '<td>' + student.username + '</td>' +
                                    '<td>' + student.origin + '</td>' +
                                '</tr>';
                            tableBody.append(row);
                        });
                        currentPage = 1;
                        totalPages = 1;
                        $('#pageInfo').text('第'+currentPage+'页/共'+totalPages+'页');
                    }else{
                        alert('未搜索到对应学生');
                    }
                },
                error:function (xhr,status,error){
                    alert('搜索失败，请检查网络');
                }
            })
        }
        //退出登录
        $('#logout').on('click',function (event){
            event.preventDefault();
            $.ajax({
                url:'dorManager/logout',
                type:'GET',
                success:function (res){
                    if(res.code === 200){
                        alert('退出成功');
                        window.location.href = '/login';
                        localStorage.removeItem('userInfo')
                    }else{
                        alert('退出失败');
                    }
                }
            })
        })
    });
</script>
</body>
</html>
